import type { Metadata } from "next";
import Head from 'next/head'
import { Inter } from "next/font/google";
import StyledJsxRegistry from './registry'
import {
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton
} from '@clerk/nextjs'
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

interface RootLayoutProps {
  children: React.ReactNode;
  metadata?: Metadata;
}

export default function RootLayout({
  children, metadata
}: RootLayoutProps) {
  
  const title = typeof metadata?.title === 'string' ? metadata.title : '欢迎来到future-next';
  return (
    <html lang="en">
       <Head>
        <title>{title}</title>
      </Head>
      <body className={inter.className}>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
      </html>
  );
}
